<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程添加</title>
</head>
<footer th:fragment="add-lesson">
<body>
    <form th:action="@{/manong/gotoAdd}" method="post">
        <div class="form-group">
            <label th:text="课程名"></label>
            <input name="course" type="text" class="form-control" placeholder="请输入新的课程名" th:value="${lesson!=null}?${lesson.course}">
        </div>
        <div class="form-group">
            <label th:text="授课教师"></label>
            <input name="teacher" type="text" class="form-control" placeholder="请输入新的授课教师" th:value="${lesson!=null}?${lesson.teacher}">
        </div>
        <div class="form-group">
            <label th:text="年级"></label>
            <input name="year" type="text" class="form-control" placeholder="请输入新的年级" th:value="${lesson!=null}?${lesson.year}">
        </div>
        <div class="form-group">
            <label th:text="上课时间"></label>
            <input name="jieci" type="text" class="form-control" placeholder="请输入新的时间" th:value="${lesson!=null}?${lesson.jieci}">
        </div>
        <div class="form-group">
            <label th:text="授课教室"></label>
            <input name="classroom" type="text" class="form-control" placeholder="请输入新的教室" th:value="${lesson!=null}?${lesson.classroom}">
        </div>
        <div class="form-group">
            <label th:text="星期"></label>
            <input name="week" type="text" class="form-control" placeholder="请输入新的星期" th:value="${lesson!=null}?${lesson.week}">
        </div>
        <div class="form-group">
            <label th:text="专业"></label>
            <input name="speciality" type="text" class="form-control" placeholder="请输入新的专业" th:value="${lesson!=null}?${lesson.speciality}">
        </div>
        <div class="form-group">
            <label th:text="学分"></label>
            <input name="credit" type="text" class="form-control" placeholder="请输入新的学分" th:value="${lesson!=null}?${lesson.credit}">
        </div>
        <button type="submit">添加</button>
    </form>
    <!-- 新的表单部分结束 -->

    <p th:text="${msg}"></p >

    <!-- 添加动效示例 -->
    <script>
        // 当表单字段获得焦点时改变边框颜色
        const formInputs = document.querySelectorAll('input[type="text"]');
        formInputs.forEach(input => {
            input.addEventListener('focus', () => {
                input.style.border = '1px solid #007bff'; // 改变边框颜色为蓝色
            });

            input.addEventListener('blur', () => {
                input.style.border = '1px solid #ccc'; // 恢复默认边框颜色
            });
        });
    </script>
</body>
</footer>
</html>

